body{
    background-color: #f3f3f3;
}
@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}
$color:#17A2B8;
:root{
    font-size: 15px;
}
.navbar{
    @include center();
    padding: 1rem 0;
   
    & > .logo{
        color: $color;
        font-size: 1.2rem;
        font-weight: bold;
        margin-right: 1rem;
        @include center();
        i.fa{
            margin-right: 0.4rem;
            font-weight: bold;
        }
        
    }
    & > nav{
        margin-right: auto;
        @include center();
        
        a{
            text-decoration: none;
            font-size: 1.1rem;
            color: #333;
            padding: 0 0.7rem;
        }
    }
    & > .member{
        display: flex;
        & > .message{
            @include center();
            i.fa{
                font-size: 1.2rem;
                color: #333;
               
            }
            span{
                font-size: 0.8rem;
                background: $color;
                color: white;
                padding: 0 0.2rem;
                border-radius: 0.25rem;
                position: relative;
                top:-0.5rem;
                left: -0.5rem;
            }
        }
        & > .user{
            @include center();
            position: relative;
            padding-right: 2rem;
            
            img{
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 0.2rem;
            }
            & > .icon{
                label{
                    cursor: pointer;
                    @include center();
                margin-left: 0.5rem;
                span{
                    color: #333;
                }
                i.fa{
                    color: #333;
                    font-size: 0.8rem;
                    margin-left: 0.2rem;
                }
                }
            }
            input#toggle-menu:checked ~ nav{
                display: grid;
            }
           nav{
               position:absolute;
               display: grid;
               grid-auto-flow: row;
               background-color: white;
               border: solid 1px #ddd;
               top: 2.4rem;
               left: 0;
               right: 0;
               padding: 0.6em 0;
               border-radius: 0.2rem;
               display: none;
               a{
                   padding: 0.5rem 1rem;
                  
                   text-decoration: none;
                   color: black;
               }
               hr{
                   height: 1px;
                   border: none;
                   background-color: #ddd;
               }
           } 
        }
        
    }
    & > .toggle-icon{
        
        @include center();
        width: 2rem;
        height: 2rem;
        border: solid 1px ;
        position: absolute;
        right: 1rem;
        display: none;
    }

}
@media screen and (max-width:576px){
.navbar{
    justify-content: start;
    align-items: flex-start;
    padding-left: 1rem;
    flex-direction: column;
    
        & > nav {
            display: none;
            flex-direction: column;
            a{
                padding: 0.3em 0  0.3rem 0;
            }
            
        }
        & > .member{
           display: none;
           flex-direction: column;
           margin-top: 1rem;
           .message{
            flex-direction: column;
            align-items: flex-start;
            & > span{
                left: 0.6rem;
                top: -1.5rem;
            }
           }
        }
        & >.toggle-icon{
            display: flex;
        }
        input#dropdown-menu:checked{
            & ~ nav{
                display: flex;
            }
            & ~ .member{
                display: flex;
            }
            & ~ .user{
                display: flex;
            }

        }
}
}